<template>
    <n-grid :x-gap="20" :y-gap="20" :cols="2">
      <n-grid-item>
        <n-card title="季度销售趋势图" size="medium">
          <div class="chart" id="bar"/>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card title="季度销售趋势图" size="medium">
          <div class="chart" id="line"/>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card title="季度销售趋势图" size="medium">
          <div class="chart" id="bubble"/>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card title="季度销售趋势图" size="medium">
          <div class="chart">
  
          </div>
        </n-card>
      </n-grid-item>
      
    </n-grid>
    
</template>
  
  <script setup>
  import * as echarts from 'echarts';
  import { onMounted } from 'vue';
  import bar from './options/bar';
  import line from './options/line';
  import bubble from './options/bubble';
  import { bubbleGetApi } from '../../api/product';
  
  onMounted(async()=>{
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));
    // 绘制图表
    myChart.setOption(bar);
  
    //折线图
    var lineChart = echarts.init(document.getElementById('line'));
    lineChart.setOption(line);
  
    //散点图
    var bubbleChart = echarts.init(document.getElementById('bubble'));
    let res = await bubbleGetApi()
    bubble.series[0].data = res.data.data[0]
    bubble.series[1].data = res.data.data[1]
    bubbleChart.setOption(bubble);
  })
  </script>
  
  <style lang="scss" scoped>
  .chart{
    height: 260px;
    border: 1px solid red;
  }
  </style>